<template>
  <div class="preview-container" ref="previewContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

const props = defineProps<{
  modelValue: string
}>()

const previewContainer = ref<HTMLElement | null>(null)

// 渲染预览内容
const renderPreview = () => {
  if (!previewContainer.value) return

  Vditor.preview(previewContainer.value as HTMLDivElement, props.modelValue || '', {
    mode: 'dark',
    hljs: {
      enable: true,
      style: 'github',
    },
    markdown: {
      toc: true,
      mark: true,
      footnotes: true,
      autoSpace: true,
    },
    theme: {
      current: 'light',
    },
    math: {
      engine: 'KaTeX',
    },
  })
}

// 监听内容变化
watch(() => props.modelValue, () => {
  renderPreview()
})

onMounted(() => {
  renderPreview()
})
</script>

<style scoped>
.preview-container {
  /* padding: 10px; */
  border-radius: 8px;
  background-color: #fff;
  /* border: 1px solid #E2E8F0; */
}
/* 
:deep(.vditor-reset) {
  font-size: 16px !important;
}

:deep(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

:deep(p) {
  margin: 1em 0;
  line-height: 1.6;
}

:deep(img) {
  max-width: 100%;
  border-radius: 4px;
}

:deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

:deep(table td, table th) {
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
}

:deep(pre) {
  border-radius: 4px;
  margin: 1em 0;
}

:deep(blockquote) {
  border-left: 4px solid #e2e8f0;
  padding-left: 1em;
  margin: 1em 0;
  color: #4a5568;
} */
</style>
  